import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import List from './components/List'


const Stack = createStackNavigator();

function App() {
  const [keyword, setKeyword] = React.useState('');
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="List" component={List}
          options={{
            headerTitle: () => (
              <>
                <Image source={require('./assets/search.png')} style={styles.searchIcon} />
                <TextInput style={styles.searchInput} value={keyword} placeholderTextColor="#c0c0c2" placeholder="Noodles" onChangeText={text => setKeyword(text)} />
              </>
            ),
            headerRight: () => (
              <Image source={require('./assets/star.png')} style={styles.star} />
            ),
          }}
        />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  searchInput: {
    borderRadius: 10,
    borderColor: '#e2e2e2',
    borderWidth: 1,
    width: 300,
    height: 30,
    paddingLeft: 5,
    marginTop: -25,
    paddingLeft: 25
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  star: {
    width: 30,
    height: 30,
    marginRight: 10
  },
  searchIcon: {
    width: 20,
    height: 20,
    marginLeft: 5
  },
});

export default App
